<template>
  <div>
    <yc-realtime-line style="height: 500px;" @onload="onload"></yc-realtime-line>
    <fieldset>
      <legend>数据</legend>
      <button type="button" @click="createData">生成数据</button>
      生成数据条数：<input type="number" min="1" v-model.number="dataNum">
    </fieldset>
    <fieldset>
      <legend>大标题</legend>
      名称：<input v-model="titleText">
      对齐：<select v-model="titleAlign">
        <option v-for="item in aligns" :key="item.value" :value="item.value">{{ item.label }}</option>
      </select>
      字体大小：<input type="number" min="0" v-model.number="titleFontSize">
      字体颜色：<input type="color" v-model="titleColor">
    </fieldset>
    <fieldset>
      <legend>折线</legend>
      名称对齐：<select v-model="lineAlign">
        <option v-for="item in aligns" :key="item.value" :value="item.value">{{ item.label }}</option>
      </select>
      名称字体大小：<input type="number" min="0" v-model.number="lineFontSize">
      名称字体颜色：<input type="color" v-model="lineColor">
      名称上边距：<input type="number" v-model.number="lineMarginTop">
      名称下边距：<input type="number" v-model.number="lineMarginBottom">
      圆圈边框颜色：<input type="color" v-model="lineCircleBorderColor">
      隐藏时圆圈颜色：<input type="color" v-model="lineHideColor">
      显示数据点：<input type="checkbox" v-model="lineShowDataPoint">
      数据点半径：<input type="number" min="0" v-model.number="lineDataPointRadius">
      平滑显示：<input type="checkbox" v-model="lineIsSmooth">
      连接离散的点：<input type="checkbox" v-model="lineConnectDispersedPoint">
    </fieldset>
    <fieldset>
      <legend>坐标轴</legend>
      刻度线长度：<input type="number" min="0" v-model.number="axisLen">
      刻度值与刻度间距：<input type="number" min="0" v-model.number="axisPadding">
      左边距：<input type="number" min="0" v-model.number="axisMarginLeft">
      右边距：<input type="number" min="0" v-model.number="axisMarginRight">
      字体颜色：<input type="color" v-model="axisColor">
      坐标轴颜色：<input type="color" v-model="axisLineColor">
      坐标轴字体大小：<input type="number" min="0" v-model.number="axisFontSize">
      显示水平辅助线：<input type="checkbox" v-model="axisShowHorLine">
      水平辅助线颜色：<input type="color" v-model="axisHorLineColor">
    </fieldset>
    <fieldset>
      <legend>左侧坐标轴</legend>
      单位：<input v-model="leftAxisUnit">
      刻度格数：5(仅初始化时有效)&nbsp;
      最小值：未设置(仅初始化时有效)&nbsp;
      最大值：未设置(仅初始化时有效)
      <!-- 坐标轴最小值：<input type="number" v-model.number="leftAxisMin"> -->
    </fieldset>
    <fieldset>
      <legend>右侧坐标轴</legend>
      单位：<input v-model="rightAxisUnit">
      刻度格数：5(仅初始化时有效)&nbsp;
      最小值：未设置(仅初始化时有效)&nbsp;
      最大值：未设置(仅初始化时有效)
      <!-- 坐标轴最小值：<input type="number" v-model.number="leftAxisMin"> -->
    </fieldset>
    <fieldset>
      <legend>底部坐标轴</legend>
      刻度格数：<input type="number" min="1" v-model.number="bottomAxisNum">
      每格秒数：<input type="number" min="1" v-model.number="bottomAxisSize">
    </fieldset>
    <fieldset>
      <legend>辅助线</legend>
      颜色：<input type="color" v-model="assistColor">
      虚线：<input type="checkbox" v-model="assistIsDash">
      显示对齐点边框：<input type="checkbox" v-model="assistShowPointBorder">
      对齐点半径：<input type="number" min="1" v-model.number="assistCircleRadius">
    </fieldset>
    <fieldset>
      <legend>数据面板</legend>
      无数据时显示：<input v-model="pannelNoDataText">
      分隔符：<input v-model="pannelSeparator">
      显示单位：<input type="checkbox" v-model="pannelShowUnit">
      字体大小：<input type="number" min="1" v-model.number="pannelFontSize">
      字体颜色：<input type="color" v-model="pannelColor">
      背景色：<input type="color" v-model="pannelBgColor">
      圆角大小：<input type="number" min="0" v-model.number="pannelBorderRadius">
      与辅助线的间距：<input type="number" min="0" v-model.number="pannelMargin">
      面板间距：<input type="number" min="0" v-model.number="pannelPadding">
      行间距：<input type="number" min="0" v-model.number="pannelLetterSpacingVer">
      圆圈与文字的间距：<input type="number" min="0" v-model.number="pannelFigureMargin">
    </fieldset>
  </div>
</template>

<script>
import YcRealtimeLine from '@/components/yc-realtimeline'

export default {
  name: 'demo',
  components: {
    YcRealtimeLine
  },
  data () {
    return {
      dataNum: 5,
      titleText: '点位实时数据监测图',
      titleAlign: 'left',
      titleFontSize: 20,
      titleColor: '#333333',
      lineAlign: 'center',
      lineFontSize: 18,
      lineColor: '#333333',
      lineMarginTop: 5,
      lineMarginBottom: 5,
      lineCircleBorderColor: '#999999',
      lineHideColor: '#A4A4A4',
      lineShowDataPoint: false,
      lineDataPointRadius: 1.5,
      lineIsSmooth: false,
      lineConnectDispersedPoint: true,
      axisLen: 5,
      axisPadding: 5,
      axisMarginLeft: 50,
      axisMarginRight: 50,
      axisColor: '#333333',
      axisLineColor: '#333333',
      axisFontSize: 16,
      axisShowHorLine: false,
      axisHorLineColor: '#999999',
      leftAxisUnit: 'mm/s · rms',
      // leftAxisNum: 5,
      // leftAxisMin: 0, // 为了优化效率，仅初始化时有效果
      rightAxisUnit: '℃',
      bottomAxisNum: 20,
      bottomAxisSize: 5,
      assistColor: '#333333',
      assistIsDash: false,
      assistShowPointBorder: true,
      assistCircleRadius: 5,
      pannelNoDataText: '无数据',
      pannelSeparator: '：',
      pannelShowUnit: true,
      pannelFontSize: 16,
      pannelColor: '#ffffff',
      pannelBgColor: '#333333',
      pannelBorderRadius: 5,
      pannelMargin: 20,
      pannelPadding: 10,
      pannelLetterSpacingVer: 8,
      pannelFigureMargin: 8,

      aligns: [
        { label: '居左', value: 'left' },
        { label: '居中', value: 'center' },
        { label: '居右', value: 'right' }
      ]
    }
  },
  methods: {
    initGraph (vm) {
      const option = {
        title: {
          text: '点位实时数据监测图',
          align: 'left'
        },
        axis: {
          // showHorLine: true
          // padding: 20,
          // len: 10
          // fontSize: 20
        },
        leftAxis: {
          // min: 10.5,
          // max: 80,
          // num: 8,
          unit: 'mm/s · rms'
        },
        rightAxis: {
          // min: 30,
          // max: 50.5,
          // num: 3,
          unit: '℃'
        },
        bottomAxis: {
          // num: 10, // 横坐标一共几格
          // size: 10, // 每格几秒
          showNowTime: false, // 是否显示当前时间
          dataAlign: 'right' // 不显示当前时间时，数据对齐右侧坐标轴
          // showTimeGap: 120
        },
        line: {
          names: ['通道X-Overall Vib', '通道Y-Overall Vib', '通道Z-Overall Vib', '温度'],
          axis: ['left', 'left', 'left', 'right'],
          // axis: ['left', 'left', 'left'],
          keys: ['k1', 'k2', 'k3', 'k4', 'k5'],
          extraUnits: ['℃'],
          maxShowIndex: 2,
          // isSmooth: true,
          // showDataPoint: true,
          // fontSize: 20,
          align: 'center'
          // letterSpacingVer: 109
        },
        assist: {
          // color: 'red'
          // dash: [5, 10]
          // circleBorderColor: 'rgba(0, 0, 0, 0)'
        },
        pannel: {
          // noDataText: 'no data',
          // separator: ',',
          color: '#fff',
          bgColor: 'rgba(0, 0, 0, 0.7)'
          // circleBorderColor: 'rgba(0, 0, 0, 0)'
        },
        printRenderCostTime: true
      }
      this.graph = vm.init(option)
      this.addData(100, 105) // 初始化数据
    },
    addData (num, minusNum = 0) {
      let dd
      const now = Math.floor(new Date().getTime() / 1000)
      if (minusNum) {
        dd = now - minusNum
      } else {
        const data = this.graph.line.data[0]
        if (data && data.length) { // 有数据
          const dataNow = data[data.length - 1].x
          if (now - 5 > dataNow) { // 表示没有后续数据了
            dd = now - 5 // 五秒前的数据
          } else { // 还有后续数据没有显示
            dd = dataNow + 1 // 最后一条数据后一秒的数据
          }
        } else { // 没有数据
          dd = now - 5 // 五秒前的数据
        }
      }
      const data = []
      let raise = true
      let y1 = 5

      const v1 = 10
      const v2 = 20
      const v3 = 30
      const v4 = 40
      // 循环生成数据
      for (let i = 0; i < num; i++) {
        const d = dd + i
        if (y1 > 49) {
          raise = false
        } else if (y1 < 1) {
          raise = true
        }
        if (raise) {
          y1++
        } else {
          y1--
        }
        data.push({
          k1: this.getFormatNumber(v1 + Math.random() * 6 - 3),
          k2: this.getFormatNumber(v2 + Math.random() * 4 - 2),
          k3: this.getFormatNumber(v3 + Math.random() * 2 - 1),
          k4: this.getFormatNumber(v4 + Math.random() - 0.5),
          // k4: v4,
          k5: d
        })
      }
      this.graph.addData(data)
    },
    getFormatNumber (num, n = 2) {
      const tn = Math.pow(10, n)
      return Math.floor(num * tn) / tn
    },
    createData () {
      const num = this.dataNum
      this.addData(num)
    },
    onload (vm) {
      this.initGraph(vm)
    }
  },
  watch: {
    titleText (value) {
      this.graph.title.text = value
    },
    titleAlign (value) {
      this.graph.title.align = value
    },
    titleFontSize (value) {
      this.graph.title.fontSize = value
    },
    titleColor (value) {
      this.graph.title.color = value
    },
    lineAlign (value) {
      this.graph.line.align = value
    },
    lineFontSize (value) {
      this.graph.line.fontSize = value
    },
    lineColor (value) {
      this.graph.line.color = value
    },
    lineMarginTop (value) {
      this.graph.line.marginTop = value
    },
    lineMarginBottom (value) {
      this.graph.line.marginBottom = value
    },
    lineCircleBorderColor (value) {
      this.graph.line.circleBorderColor = value
    },
    lineHideColor (value) {
      this.graph.line.hideColor = value
    },
    lineShowDataPoint (value) {
      this.graph.line.showDataPoint = value
    },
    lineDataPointRadius (value) {
      this.graph.line.dataPointRadius = value
    },
    lineIsSmooth (value) {
      this.graph.line.isSmooth = value
    },
    lineConnectDispersedPoint (value) {
      this.graph.line.connectDispersedPoint = value
    },
    axisLen (value) {
      this.graph.axis.len = value
    },
    axisPadding (value) {
      this.graph.axis.padding = value
    },
    axisMarginLeft (value) {
      this.graph.axis.marginLeft = value
    },
    axisMarginRight (value) {
      this.graph.axis.marginRight = value
    },
    axisColor (value) {
      this.graph.axis.color = value
    },
    axisLineColor (value) {
      this.graph.axis.lineColor = value
    },
    axisFontSize (value) {
      this.graph.axis.fontSize = value
    },
    axisShowHorLine (value) {
      this.graph.axis.showHorLine = value
    },
    axisHorLineColor (value) {
      this.graph.axis.horLineColor = value
    },
    leftAxisUnit (value) {
      this.graph.leftAxis.unit = value
    },
    // leftAxisNum (value) {
    //   this.graph.leftAxis.num = value
    // },
    // leftAxisMin (value) {
    //   this.graph.leftAxis.min = value
    // },
    rightAxisUnit (value) {
      this.graph.rightAxis.unit = value
    },
    bottomAxisNum (value) {
      this.graph.bottomAxis.num = value
    },
    bottomAxisSize (value) {
      this.graph.bottomAxis.size = value
    },
    assistColor (value) {
      this.graph.assist.color = value
    },
    assistIsDash (value) {
      if (value) {
        this.graph.assist.dash = [5, 15]
      } else {
        this.graph.assist.dash = []
      }
    },
    assistShowPointBorder (value) {
      this.graph.assist.showPointBorder = value
    },
    assistCircleRadius (value) {
      this.graph.assist.circleRadius = value
    },
    pannelNoDataText (value) {
      this.graph.pannel.noDataText = value
    },
    pannelSeparator (value) {
      this.graph.pannel.separator = value
    },
    pannelShowUnit (value) {
      this.graph.pannel.showUnit = value
    },
    pannelFontSize (value) {
      this.graph.pannel.fontSize = value
    },
    pannelColor (value) {
      this.graph.pannel.color = value
    },
    pannelBgColor (value) {
      this.graph.pannel.bgColor = value
    },
    pannelBorderRadius (value) {
      this.graph.pannel.borderRadius = value
    },
    pannelMargin (value) {
      this.graph.pannel.margin = value
    },
    pannelPadding (value) {
      this.graph.pannel.padding = value
    },
    pannelLetterSpacingVer (value) {
      this.graph.pannel.letterSpacingVer = value
    },
    pannelFigureMargin (value) {
      this.graph.pannel.figureMargin = value
    }
  },
  mounted () {
    // this.initGraph()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  input[type=number] {
    width: 60px;
  }
</style>
